<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  ~ Copyright (c) 2020 Contributors to the Eclipse Foundation
  ~
  ~ See the NOTICE file(s) distributed with this work for additional
  ~ information regarding copyright ownership.
  ~
  ~ This program and the accompanying materials are made available under the
  ~ terms of the Eclipse Public License 2.0 which is available at
  ~ http://www.eclipse.org/legal/epl-2.0, or the Apache Software License 2.0
  ~ which is available at https://www.apache.org/licenses/LICENSE-2.0.
  ~
  ~ SPDX-License-Identifier: EPL-2.0 OR Apache-2.0
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->

<div *ngIf="fetchingData; then loading else content"></div>
<ng-template #loading>
    <div style="padding: 0.5em; font-size: xx-small; font-style: italic; text-align: center">
        <i class="fas fa-spinner fa-spin"></i>
    </div>
</ng-template>
<ng-template #content>
    <div *ngIf="nodeTemplateInstanceData; then instanceData else placeholder"></div>
    <ng-template #instanceData>
        <div class="table-scrollable">
            <table class="parameters-table">
                <thead>
                <tr>
                    <th scope="col">Name</th>
                    <th scope="col">Value</th>
                </tr>
                </thead>
                <tbody>
                <tr *ngFor="let key of objectKeys(nodeTemplateInstanceData)">
                    <td>{{key}}</td>
                    <td>{{nodeTemplateInstanceData[key] || '(empty)'}}</td>
                </tr>
                </tbody>
            </table>
        </div>
    </ng-template>
    <div *ngIf="enableControlButtons()" class="d-flex m-2">
        <ng-template
            *ngIf="selectedNodeState === NodeTemplateInstanceStates.STARTED; then stopNode else startNode"></ng-template>
        <ng-template #startNode>
            <button class="btn-live-modeling btn-live-modeling-start"
                    (click)="handleStartNode()">
                <i class="fa fa-play-circle"></i>
                START NODE
            </button>
        </ng-template>
        <ng-template #stopNode>
            <button class="btn-live-modeling btn-live-modeling-stop"
                    (click)="handleStopNode()">
                <i class="fa fa-stop-circle"></i>
                STOP NODE
            </button>
        </ng-template>
    </div>
    <ng-template #placeholder>
        <div style="padding: 0.5em; font-size: xx-small; font-style: italic; text-align: center">
            No node template selected or found
        </div>
    </ng-template>
</ng-template>
